<!-- DOM图片懒加载 -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul {
        width: 500px;
        margin: 0 auto;
      }
      li {
        position: relative;
        width: 100%;
        height: 1000px;
        border: 1px solid #000;
      }
      img {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 400px;
        height: 400px;
        margin-left: -200px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><img src="../img/avatar.png" /></li>
      <li><img src="../img/defaultInteriorBackgroundBanner.jpg" /></li>
      <li><img src="../img/Logo.png" /></li>
      <li><img src="../img/avatar.png" /></li>
      <li><img src="../img/defaultInteriorBackgroundBanner.jpg" /></li>
    </ul>
    <script>
      //懒加载：当访问一个页面的时候，先把img元素或其他的背景路径替换成其他（1*1的图片|| 自定义属性），当图片需要渲染时，再把真实的路径给到src属性
      var imgs = document.getElementsByTagName("img");
      //1、给每一个元素添加一个自定义的属性 data-src
      for (var i = 0; i < imgs.length; i++) {
        //1-1、添加属性
        imgs[i].setAttribute("data-src", imgs[i].src);
        //1-2、清空每一个imgs的src
        imgs[i].src = "";
      }
      //2、绑定滚动条事件
      document.onscroll = function () {
        //2-1、获取滚轮的滚动距离
        var t = document.body.scrollTop || document.documentElement.scrollTop;
        // console.log(t)
        //2-2、获取可视窗口的高度
        var h = document.documentElement.clientHeight;
        //2-3、求img元素顶部的距离 可视高度 + 滚动过的距离(滚轮已走的路程)
        var maxT = h + t;
        //2-4、给每一张图片判断何时出现
        for (var i = 0; i < imgs.length; i++) {
          if (OffSetTop(imgs[i]) <= maxT - 100) {
            console.log(OffSetTop(imgs[1]));
            //2-5、条件成立则存在data-src中的资源赋值给imgs
            imgs[i].src = imgs[i].getAttribute("data-src");
          }
        }
      };
      //2-4-1、即将出现在可视区域的判断条件
      function OffSetTop(obj) {
        var _top = 0; //用来存放obj距离顶部的偏移量 （浏览器顶部 document）
        //offsetParent：获取定位父级
        while (obj.offsetParent) {
          _top += obj.offsetTop;
          obj = obj.offsetParent;
        }
        return _top;
      }
    </script>
  </body>
</html>
